<template>
  <div class="ub" style="height: 100%;">
    <div style='width: 270px;' class="box">
      <el-col :span="24" class="title">项目概况</el-col>
      <el-col :span="24" class="sizeFont">
        <el-col :span="18" style="text-align: end">立项未进场：</el-col>
        <el-col :span="6" style="line-height: 33px;">{{ formData.projectApproval }}</el-col>
      </el-col>
      <el-col :span="24" class="sizeFont">
        <el-col :span="18" style="text-align: end">在建：</el-col>
        <el-col :span="6" style="line-height: 33px;">{{ formData.constructing }}</el-col>
      </el-col>
      <el-col :span="24" class="sizeFont">
        <el-col :span="18" style="text-align: end">停工：</el-col>
        <el-col :span="6" style="line-height: 33px;">{{ formData.stop }}</el-col>
      </el-col>
      <el-col :span="24" class="sizeFont">
        <el-col :span="18" style="text-align: end">完工：</el-col>
        <el-col :span="6" style="line-height: 33px;">{{ formData.finish }}</el-col>
      </el-col>
      <el-col :span="24" class="sizeFont">
        <el-col :span="18" style="text-align: end">验收：</el-col>
        <el-col :span="6" style="line-height: 33px;">{{ formData.checkAndAccept }}</el-col>
      </el-col>
      <el-col :span="24" class="sizeFont">
        <el-col :span="18" style="text-align: end">已竣未结：</el-col>
        <el-col :span="6" style="line-height: 33px;">{{ formData.yijunweijie }}</el-col>
      </el-col>
    </div>
    <div class="box maxBox ub-f1">
      <el-col :span="24" class="title">质量问题排查治理情况</el-col>
      <el-col :span="24" style="margin-top: 10px;">
        <el-col :span="8" :offset="5">
          <el-select size="mini" clearable v-model="projectId" placeholder="选择项目:全部" @change="getData">
            <el-option v-for="(item, index) in projectNameOptions" :label="item.label" :value="item.value"
              :key="index"></el-option>
          </el-select>
        </el-col>
        <el-col :span="10">
          <el-date-picker size="mini" v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="getData">
          </el-date-picker>
        </el-col>
      </el-col>
      <el-col :span="24">
        <el-col class="shuzi">
          <el-col :span="6" class="boxmax" style="color:rgb(72, 136, 244)">企业检查</el-col>
          <el-col :span="18" style="font-size: 18px; font-weight: bold">
            <div>
              <span class="spanCss">检查总数</span>
              <div class="spanCss" style="color:rgb(41, 177, 115);">{{ enterCheck.checkCounts==null ? "0":enterCheck.checkCounts}}</div>
              <span class="spanCss">问题总数</span>
              <div class="spanCss" style="color:rgb(59, 92, 255);">{{ enterCheck.questionCounts == null ? "0":enterCheck.questionCounts  }}</div>
            </div>
            <div>
              <span class="spanCss">重大问题</span>
              <div class="spanCss" style="color:red;">{{ enterCheck.bigQuestionCounts==null ? "0":enterCheck.bigQuestionCounts  }}</div>
              <span class="spanCss">整改率</span>
              <div class="spanCss" style="color:rgb(41, 177, 115)">{{ enterCheck.finishCounts==null ? "0":enterCheck.finishCounts }}</div>
            </div>
          </el-col>
        </el-col>
        <el-col class="shuzi">
          <el-col :span="6" class="boxmax" style="color:rgb(124, 24, 255);">项目检查</el-col>
          <el-col :span="18" style="font-size: 18px; font-weight: bold">
            <div>
              <span class="spanCss">检查总数</span>
              <span class="spanCss" style="color:rgb(41, 177, 115);">{{ projectCheck.checkCounts==null ? "0":projectCheck.checkCounts }}</span>
              <span class="spanCss">问题总数</span>
              <span class="spanCss" style="color:rgb(59, 92, 255);">{{ projectCheck.questionCounts==null ? "0":projectCheck.questionCounts }}</span>
            </div>
            <div>
              <span class="spanCss">重大问题</span>
              <span class="spanCss" style="color:red;">{{ projectCheck.bigQuestionCounts==null ? "0":projectCheck.bigQuestionCounts }}</span>
              <span class="spanCss">整改率</span>
              <span class="spanCss" style="color:rgb(41, 177, 115);">{{ projectCheck.finishCounts==null ? "0":projectCheck.finishCounts }}</span>
            </div>
          </el-col>
        </el-col>
      </el-col>
      <el-col :span="24"> </el-col>
    </div>
  </div>
</template>
<script>
import { listDept } from "@/api/navbar";
import { getProjectOverview, getHiddenGovernSituation } from "./api";
export default {
  data() {
    return {
      projectNameOptions: [],
      projectId: this.$store.state.app.selectData,
      dateRange: [],
      formData: {
        projectApproval: null,
        constructing: null,
        stop: null,
        finish: null,
        checkAndAccept: null,
        yijunweijie: null,
      },
      enterCheck: {
        enterCheckNum: 0,
        hiddenDangerNum: 0,
        majorHiddenDangerNum: 0,
        rectificationRate: 0,
      },
      projectCheck: {
        projectCheckNum: 0,
        hiddenDangerNum: 0,
        majorHiddenDangerNum: 0,
        rectificationRate: 0,
      },
    };
  },
  methods: {
    async getProjectNameOptions() {
      this.projectNameOptions = [];
      const res = await listDept();
      const buffer = res.data.sort(function (a, b) {
        return b.id - a.id;
      });
      this.projectNameOptions = buffer.map((item) => {
        return { value: item.id, label: item.name };
      })
    },
    getData() {
      getHiddenGovernSituation({
        projectId: this.projectId,
        startDate: this.dateRange && this.dateRange.length ? this.dateRange[0] : null,
        endDate: this.dateRange && this.dateRange.length ? this.dateRange[1] : null,
      }).then((data) => {
        this.enterCheck = data.officeInfo
        this.projectCheck = data.projectInfo
      })
    }
  },
  created() {
    this.getProjectNameOptions();
    getProjectOverview().then((data) => {
      this.formData = data.data
    })
    this.getData()
  },
};
</script>
<style scoped lang="scss">
.box {
  background-color: rgb(13, 26, 47);
  height: 100%;

  .title {
    padding: 5px;
  }
}

.maxBox {
  margin-left: 20px;
}

.sizeFont {
  font-size: 22px;
  margin-top: 20px;
}

.boxmax {
  height: 80px;
  width: 80px;
  background-color: rgb(16, 32, 58);
  padding: 20px;
  font-size: 16px;
  font-weight: bold;
}

.shuzi {
  margin-left: 20px;
  margin-bottom: 20px;
  margin-top: 40px;
}

::v-deep .el-input__inner {
  background-color: transparent !important;
}

::v-deep .el-date-editor--daterange.el-input__inner {
  width: auto;
  border-color: rgba(117, 122, 130);
  color: rgb(117, 122, 130);
}

/**修改边框和字体颜色 */
::v-deep .el-select {
  position: relative;
  width: 160px;

  .el-input {
    input {
      border-color: rgba(117, 122, 130);
      color: rgb(117, 122, 130);
    }
  }
}

::v-deep .el-range-input {
  background-color: transparent !important;
}

.spanCss {
  display: inline-block;
  margin-left: 20px;
  margin-top: 10px;
  width: 76px;
}
</style>
